<template>
  <div id="app">
    <el-form ref="form" :name="formdata.name" label-width="80px">
      <FormCreateVue
      v-for="(item, index) in formdata.forms"
      :item="item"
      :key="index"
      @changeForm="function(form){
        changeForm(form, index)
      }"
      >
      </FormCreateVue>
      <!-- submit -->
      <el-form-item>
        <el-button type="primary">{{formdata.submit}}</el-button>
        <el-button>{{formdata.cancel}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import FormCreateVue from './FormCreate.vue'

export default {
  name: 'app',
  components: {
    FormCreateVue
  },
  data () {
    return {
      formdata: {
        name: 'form-component',
        submit: '提交',
        cancel: '取消',
        forms: [
          {
            label: '标题',
            placeholder: '提示',
            type: 'text',
            minlength: 0,
            maxlength: 30,
            value: '',
            name: 'f-text'
          }
        ]
      },
      formTypeArr: ['text', 'password', 'textarea', 'select', 'cascader', 'date', 'file', 'img']
    }
  },
  methods: {
    // 修改数据方法
    changeForm (form, index) {
      this.formdata.forms[index] = form
    },
    dealFormData () {
      // 处理表单数据方法
      const froms = this.formdata.forms
      const newForms = []
      for (const i in froms) {
        // 看类别存不存在 并且必须要有name属性
        if (!this.formTypeArr.includes(froms[i].type) || !froms[i].name) continue
        // 类别存在就开始处理数据
        let formData
        switch (froms[i].type) {
          case 'text':
            formData = this.dealFormDataText(froms[i])
            break
          case 'textarea':
            formData = this.dealFormDataTextarea(froms[i])
            break
          case 'password':
            formData = this.dealFormDataPassword(froms[i])
            break
          case 'select':
            formData = this.dealFormDataSelect(froms[i])
            break
          case 'cascader':
            formData = this.dealFormDataCascader(froms[i])
            break
          case 'date':
            formData = this.dealFormDataDate(froms[i])
            break
          case 'file':
            formData = this.dealFormDataFile(froms[i])
            break
          case 'img':
            formData = this.dealFormDataImg(froms[i])
            break
          default:
            formData = false
        }
        if (formData) newForms.append(formData)
      }
      this.formdata.forms = newForms
    },
    // 处理text数据
    dealFormDataText (formData) {
      formData.value = formData.value || ''
      formData.placeholder = formData.placeholder || ''
      formData.disabled = formData.disabled === true ? formData.disabled : false
      formData['show-word-limit'] = !!formData['show-word-limit']
      if (formData.maxlength && !this.isNumberOrStringOfNumber(formData.maxlength)) {
        delete formData.maxlength
      }
      if (formData.minlength && !this.isNumberOrStringOfNumber(formData.maxlength)) {
        delete formData.maxlength
      }
      return formData
    },
    // 处理password数据
    dealFormDataPassword (formData) {
      formData.value = formData.value || ''
      formData.placeholder = formData.placeholder || ''
      formData.disabled = formData.disabled === true ? formData.disabled : false
      formData['show-password'] = !!formData['show-password']
      return formData
    },
    // 处理textarea数据
    dealFormDataTextarea (formData) {
      formData.value = formData.value || ''
      formData.placeholder = formData.placeholder || ''
      formData.disabled = formData.disabled === true ? formData.disabled : false
      formData['show-word-limit'] = !!formData['show-word-limit']
      if (formData.maxlength && !this.isNumberOrStringOfNumber(formData.maxlength)) {
        delete formData.maxlength
      }
      if (formData.minlength && !this.isNumberOrStringOfNumber(formData.maxlength)) {
        delete formData.maxlength
      }
      formData.resize = formData.resize || 'none'
      formData.autosize = formData.autosize || { minRows: 2 }
      return formData
    },
    // 处理select数据
    dealFormDataSelect (formData) {
      formData.value = formData.value || ''
      formData.placeholder = formData.placeholder || ''
      formData.clearable = formData.clearable || true
      formData.disabled = formData.disabled === true ? formData.disabled : false
      if (formData.options && typeof formData.options === 'object' && Array.isArray(formData.options)) {
        for (const i in formData.options) {
          if (formData.options[i].value && !formData.options[i].label) {
            formData.options[i].label = formData.options[i].value
          }
        }
      } else {
        return false
      }
      return formData
    },
    // 处理级联数据
    dealFormDataCascader (formData) {
      formData.placeholder = formData.placeholder || ''
      formData.clearable = formData.clearable || true
      formData.filterable = formData.filterable || true
      return formData
    },
    // 处理时间数据
    dealFormDataDate (formData) {
      formData.placeholder = formData.placeholder ? formData.placeholder : ''
      if (!formData.datetype || !['date', 'week', 'month', 'year'].includes(formData.datetype)) {
        formData.datetype = 'date'
      }
      return formData
    },
    // 处理文件数据
    dealFormDataFile (formData) {
      formData.limit = formData.limit || 1
      formData.action = ''
      formData.tip = formData.tip || `选择上传文件，限制数量为${formData.limit}`
      formData.multiple = !!formData.multiple
    },
    // 处理图片数据
    dealFormDataImg (formData) {
      formData.limit = formData.limit || 1
      formData.action = ''
      formData.multiple = !!formData.multiple
    },
    isNumberOrStringOfNumber (value) {
      return (typeof value === 'number' && Number.isFinite(value)) || (typeof value === 'string' && !isNaN(Number(value)))
    }
  }
}
</script>
<style lang="less" scoped>
.el-form {
  width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}
</style>
